<template>
  <div>
    <Banner :sightName="sightName" :bannerImg="bannerImg" :gallaryImgs="gallaryImgs"></Banner>
    <BannerHeader></BannerHeader>
    <BannerList :list="list"></BannerList>
    <div style='height:50rem'></div>
  </div>
</template>

<script>
import Banner from "./Components/Banner";
import BannerHeader from "./Components/Header";
import BannerList from "./Components/List";
import axios from "axios"
export default {
  name: "Detail",
  components: {
    Banner,
    BannerHeader,
    BannerList
  },
  data() {
    return {
      list: [],
      sightName: '',
      bannerImg: '',
      gallaryImgs: []
    }
  },
  created() {
    this.getDetailInfo()
  },
  methods: {
    getDetailInfo() {
      axios.get("/api/detail.json", {
        params: {
          id: this.$route.params.id
        }
      }).then(this.getSucc)
    },
    getSucc(res) {
      res = res.data
      let data = res.data
      this.sightName = data.sightName
      this.list = data.categoryList
      this.bannerImg = data.bannerImg
      this.gallaryImgs = data.gallaryImgs
    }
  }
}
</script>

<style scoped>
</style>
